<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- <p class="p">123123</p> -->
    <div id="app">
        <p ref="p">{{count}}</p>
        <p>
            <button @click="count++">count++</button>
        </p>
        <p ref="one"></p>
    </div>
</body>
<script>

    var app = new Vue({
        // el: "#app",
        data: {
            count: 1,
        },
        // methods: {},
        // computed: {},
        watch: {
            count: function (newVal, oldVal) {
                console.log("count发生了改变", newVal, oldVal);

                // 节点都是对象类型 -> 引用类型
                // console.log("p标签现在的内容", this.$refs.p.innerHTML);

                // 数据改变后会触发视图更新(将模版编译为虚拟DOM,再通过Diff算法找出修改后的元素,将虚拟DOM解析为真实DOM -> 更新视图)  => 这个操作时异步的(微任务)
                // 所以: 数据改变之后 获取DOM元素中的内容(原本的内容)

                // 如何获取更新后的内容?
                // 1. 你是微任务,那我就创建一个宏任务 -> 比异步更异步
                // setTimeout(() => {
                //     console.log("p标签现在的内容:宏任务", this.$refs.p.innerHTML);
                // })

                // 2. 官方提供的方法   
                // Vue.nextTick()     构造函数的静态方法
                // this.$nextTick()   实例的方法

                // a. 方法可以接收回调函数(微任务),在视图更新之后执行
                // this.$nextTick(() => {
                //     console.log("p标签现在的内容:微任务", this.$refs.p.innerHTML);
                // })

                // b. 如果方法不接收任何参数 默认返回Promise实例(pending状态),等视图更新之后会变为已成功(fulfilled)
                this.$nextTick().then(() => {
                    console.log("p标签现在的内容:微任务", this.$refs.p.innerHTML);
                });

            }
        }
    });
    app.$mount("#app");

    console.log(app);


</script>

</html>